<template>
    <div class="nav-header">
        <i class=" fold-menu" 
            @click="handleFoldChange" 
            :class="isFold ? 'el-icon-s-fold' : 'el-icon-s-unfold'">
        </i>
        <div class="content">
         
          <HyBreadcrumb :breadcrumbs="breadcrumbs"/>
          <user-info></user-info>

        </div>
    </div>
</template>

<script>
import {ref,computed} from 'vue'
import UserInfo from './user-info.vue'

import { useStore }  from 'vuex'
import { useRoute } from 'vue-router'
 
import HyBreadcrumb from '@/base-ui/breadcrumb'
import {pathMapBreadcrumbs} from '@/utils/map-menus'

export default {
   components:{
     UserInfo,
     HyBreadcrumb
   },
    emits:['foldChange'],
    setup (props,{ emit }) {
        const isFold=ref(false)
        const handleFoldChange=()=>{
            isFold.value=!isFold.value  
            emit('foldChange', isFold.value)
        }

        // 面包屑数据 (name,path)
        const store=useStore()
        // 当变量发生变化 计算属性会重新计算
        const breadcrumbs=computed(()=>{
            const userMenus=store.state.login.userMenus
            const route=useRoute()
            const currentPath=route.path
            return pathMapBreadcrumbs(userMenus,currentPath)
        })
        return {
            isFold,
            handleFoldChange,
            breadcrumbs
        }
    }
}
</script>

<style lang="less" scoped>
.nav-header{
    display: flex;
 
    width: 100%;
  .fold-menu{
    font-size: 30px;
    cursor: pointer;
  }
  .content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      padding: 0 30px;
  }
}
</style>